<template>
  <div>
    <el-row :gutter="20" style="margin-bottom: 10px;margin-top: 10px;margin-left: 10px;margin-right: 10px">
      <el-card shadow="hover" style="height:180px;margin-bottom: 20px;border-radius: 10px;" class="my_maintitle">
        <el-col :span="7">
          <div class="user-info">
            <img src="../../src/assets/logo/logo.png" class="user-avator" alt/>
            <div class="user-info-cont">
              <div>{{greet_message}}{{ user.userName }}</div>
              <div>咸阳市下辖县市城建档案一体化管控平台</div>
            </div>
          </div>
        </el-col>
        <el-col :span="14">
          <div class="my_information">
            <div>上次登录时间|{{get_message[0]}}</div>
            <div>上次登录浏览器|{{get_message[1]}}</div>
            <div>上次登录操作系统|{{get_message[2]}}</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="user-info">
            <img src="../../src/assets/logo/material.png" class="my_picture" alt/>
          </div>
        </el-col>
      </el-card>

      <el-row :gutter="20" >
        <el-col :span="10">
          <el-card shadow="hover" style="height:370px;border-radius: 10px;">
            <div class="login_text">
              最近登录：
            </div>
            <el-table ref="tables" v-loading="loading" :data="list" :default-sort="defaultSort">
              <!--              <el-table-column type="selection" width="55" align="center" />-->
              <el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true"/>
              <el-table-column label="登录地址" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true"/>
              <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true"/>
              <!--              <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />-->
              <!--              <el-table-column label="操作系统" align="center" prop="os" />-->
              <el-table-column label="登录状态" align="center" prop="status">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.sys_common_status" :value="scope.row.status"/>
                </template>
              </el-table-column>
              <el-table-column label="登录日期" align="center" prop="loginTime"  width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.loginTime) }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="14">
          <el-card shadow="hover" style="height:370px;border-radius: 10px;">
            <div class="panl_text">快捷方式：</div>
            <div class="container" style="margin-top: 20px">
              <div class="icon">
                <img src="../../src/assets/logo/uplode.png" @click="addUpload()" alt="Icon 1">
                <span class="text">电子档案上传</span>
              </div>
              <div class="icon">
                <img src="../../src/assets/logo/find.png" @click="toSearch()" alt="Icon 2">
                <span class="text">电子档案查询</span>
              </div>
              <div class="icon">
                <img src="../../src/assets/logo/lent.png" @click="toBorrow()" alt="Icon 3">
                <span class="text">借阅管理</span>
              </div>
              <div class="icon">
                <img src="../../src/assets/logo/box.png" @click="toMerge()" alt="Icon 4">
                <span class="text">案卷装盒</span>
              </div>
              <div class="icon">
                <img src="../../src/assets/logo/show.png" @click="toChart()" alt="Icon 5">
                <span class="text">数据可视化</span>
              </div>
              <div class="icon">
                <img src="../../src/assets/logo/sort.png" @click="toSort()" alt="Icon 6">
                <span class="text">分类查询</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px">
<!--        <el-col :span="12">-->
<!--          <el-card shadow="hover" style="height:500px;border-radius: 10px;">-->
<!--            <div class="echart1">-->
<!--              <div id="myChart" style="width:100%;height: 500px;margin: auto;"></div>-->
<!--            </div>-->
<!--          </el-card>-->
<!--        </el-col>-->
        <el-col :span="24">
          <el-card shadow="hover" style="height:500px;border-radius: 10px;">
            <div >
              <div id="myColumnChart" style="width:100%;height: 450px;margin: auto"></div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
  import {list} from "@/api/monitor/logininfor";
  import { getUserProfile } from "@/api/system/user";
  import * as echarts from 'echarts';
  import {getQuXianNumber} from "../api/system/enginfo";
  import {getQuarterly} from "../api/system/info";

  require('echarts/theme/macarons')
  export default {
    dicts: ['sys_common_status'],
    data() {
      return {
        yearlist:[],
        this_yearlist:[],
        last_yearlist:[],
        my_name:'',
        user: {},
        greet_message: '',
        show_message: [],
        get_message: [],
        mydate: [],
        name: localStorage.getItem('ms_username'),
        role: localStorage.getItem('role'),
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 选择用户名
        selectName: "",
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 表格数据
        list: [],
        // 日期范围
        dateRange: [],
        // 默认排序
        defaultSort: {prop: 'loginTime', order: 'descending'},
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 5,
          ipaddr: undefined,
          userName: undefined,
          status: undefined
        },
      }
    },
    mounted() {
      this.getUser();
      this.time_message();
      this.getSeasonList();
    },
    methods: {
      getList() {
        this.loading = true;
        list(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
            this.list = response.rows;
            this.total = response.total;
            this.show_message =this.list[0];
            this.get_message[0]=this.show_message['loginTime'];
            this.get_message[1]=this.show_message['browser'];
            this.get_message[2]=this.show_message['os'];
            this.loading = false;
          }
        );
      },
      getSeasonList() {
        this.loading = true;
        getQuarterly().then(response => {
          this.yearlist.push(response["当前年份"]) ;
          this.yearlist.push(response["往年年份"]) ;
          this.last_yearlist=response["往年数量"] ;
          this.this_yearlist=response["当年数量"] ;
          this.loading = false;
          this.drawLine();
        });
      },
      getUser() {
        getUserProfile().then(response => {
          this.user = response.data;
          this.queryParams.userName=this.user.userName
          this.getList()
        });
      },
      handleQuery() {
        this.queryParams.userName=this.user.userName
        this.queryParams.pageNum = 1;
        this.getList();
      },
      time_message() {
        let year = new Date().getFullYear();
        //月份是从0月开始获取的，所以要+1;
        let month = new Date().getMonth() + 1;
        //日
        let day = new Date().getDate();
        //时
        let hour = new Date().getHours();
        //分
        let minute = new Date().getMinutes();
        if (hour >= 6 && hour < 12) {
          this.greet_message = '上午好！'
        } else if (hour >= 12 && hour < 14) {
          this.greet_message = '中午好！'
        } else if (hour >= 14 && hour < 18) {
          this.greet_message = '下午好！'
        } else {
          this.greet_message = '晚上好！'
        }
        this.mydate = year + '-' + month + '-' + day;
        this.mytime = hour + ':' + minute;
      },
      addUpload() {
        this.$router.push({
          path: '/upload/info'
        })
      },
      toSearch(){
        this.$router.push({
          path: '/search/search'
        })
      },
      toChart(){
        this.$router.push({
          path: '/charts'
        })
      },
      toBorrow() {
        this.$router.push({
          path: '/borrow/borrow'
        })
      },
      toSort() {
        this.$router.push({
          path: '/search/system/show/index'
        })
      },
      toMerge(){
        this.$router.push({
          path: '/merge/volumeinfo'
        })
      },
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        // let myChart = echarts.init(document.getElementById('myChart'))
        // // 绘制图表
        // myChart.setOption({
        //   title: {
        //     text: '区县档案比例统计图',
        //     subtext: '三区一县',
        //     left: 'center',
        //     textStyle:{
        //       fontWeight:'lighter'
        //     }
        //   },
        //   tooltip: {
        //     trigger: 'item'
        //   },
        //   legend: {
        //     orient: 'vertical',
        //     left: 'left'
        //   },
        //   series: [
        //     {
        //       name: 'Access From',
        //       type: 'pie',
        //       radius: '50%',
        //       data: [
        //         { value: this.quxianlist[0], name: '印台区' },
        //         { value: this.quxianlist[1], name: '王益区' },
        //         { value: this.quxianlist[2], name: '耀州区' },
        //         { value: this.quxianlist[3], name: '宜君县' }
        //       ],
        //       emphasis: {
        //         itemStyle: {
        //           shadowBlur: 10,
        //           shadowOffsetX: 0,
        //           shadowColor: 'rgba(0, 0, 0, 0.5)'
        //         }
        //       }
        //     }
        //   ]
        // });

        let myChart1 = echarts.init(document.getElementById('myColumnChart'))
        // 绘制图表
        myChart1.setOption({
          title: {
            text: '录入档案数量统计图',
            textStyle:{
              fontWeight:'lighter'
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: ['春季', '夏季', '秋季', '冬季']
          },
          series: [
            {
              name: this.yearlist[1],
              type: 'bar',
              data: this.last_yearlist
            },
            {
              name: this.yearlist[0],
              type: 'bar',
              data: this.this_yearlist
            }
          ]
        });
        window.addEventListener('resize', function() {
          myChart1.resize();
          // myChart.resize();
        });
      },
    }
  }

</script>

<style>
  .user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  .my_information {
    margin-top: 37px;
    font-size: 15px;
    color: #ffffff;
  }

  .user-avator {
    display: block;
    width: 120px;
    height: 120px;
    border-radius: 50%;
  }

  .my_picture {
    float: right;
    display: block;
    width: 150px;
    height: 150px;
    margin-bottom: 18px;
  }

  .user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 16px;
    color: #fafafa;

  }

  .user-info-cont div:first-child {
    font-size: 28px;
    color: #ffffff;
    margin-top: 10px;
  }

  .my_maintitle {
    /*background-image: linear-gradient(to left, rgba(112, 243, 255, 1), rgba(68, 206, 246, 1));*/
    background-image: linear-gradient(to left, rgba(6,82,121,0.5), rgba(23,124,176,1));
  }

  .login_text{
    margin-left: 2%;
    font-family: "PingFang SC";
    font-weight: lighter;
  }

  .panl_text{
    margin-left: 1%;
    font-family: "PingFang SC";
    font-weight: lighter;
  }

  .user-info-list span {
    margin-left: 70px;
  }

  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .icon {
    flex: 0 0 calc(33.33% - 20px);
    margin: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .icon img {
    width: 80px;
    height: 80px;
    transition: all 0.3s ease-in-out;
  }

  .icon img:hover {
    transform: scale(1.2);
    cursor: pointer;
  }
  .text {
    margin-top: 10px;
    font-size: 14px;
    font-family: "PingFang SC"
  }

  .text:hover{
    cursor: pointer;
  }

  canvas {
    width: 100%;
  }


</style>
